<template>
	<view class="container">
		<!-- 活动类型筛选 -->
		<view class="filter-section">
			<u-row gutter="15">
				<u-col span="3" v-for="(type, index) in activityTypes" :key="index">
					<u-button 
					  :customStyle="{
					    backgroundColor: activeType === index ? '#409EFF !important' : '',
					    color: activeType === index ? 'white !important' : ''
					  }"
					  @click="setActiveType(index)"
					  shape="circle" 
					  :text="type.label" 
					  size="middle"
					></u-button>
				</u-col>
			</u-row>
		</view>

		<!-- 状态筛选 -->
		<view class="filter-section">
			<u-row gutter="15">
				<u-col span="3" v-for="(status, index) in activityStatus" :key="index">
					<u-button
					  :customStyle="{
					    backgroundColor: activeStatus === index ? '#409EFF !important' : '',
					    color: activeStatus === index ? 'white !important' : ''
					  }"
					  @click="setActiveStatus(index)"
					  shape="circle" 
					  :text="status.label" 
					  size="middle"
					></u-button>
				</u-col>
			</u-row>
		</view>

		<!-- 课程列表 - 添加淡入动画 -->
		<view class="activity-list">
			<view 
				v-for="(item, index) in filteredActivities" 
				:key="item.activityId" 
				class="activity-card animated-item"
				@click="openDetail(item.activityId)"
				:style="{animationDelay: `${index * 0.1}s`}"
			>
				<!-- 封面图片 -->
				<u-image :src="item.coverImage" width="100%" height="180px" radius="8" mode="aspectFill"></u-image>

				<!-- 活动信息 -->
				<view class="activity-info">
					<view class="activity-header">
						<text class="activity-title">{{ item.title }}</text>
						<uni-tag :text="getActivityTypeLabel(item.activityType)"
							:type="getActivityTypeTag(item.activityType)" />
					</view>

					<view class="activity-meta">
						<u-icon name="calendar" size="16" color="#909399"></u-icon>
						<text class="date">{{ formatDateRange(item.startDate, item.endDate) }}</text>
					</view>

					<view v-if="item.location" class="activity-meta">
						<u-icon name="map" size="16" color="#909399"></u-icon>
						<text class="location">{{ item.location }}</text>
					</view>

					<view class="creator-info">
						<text class="creator-name">{{ item.createBy }}</text>
						<uni-tag :text="getActivityStatusLabel(item.status)" :type="getActivityStatusTag(item.status)"
							size="small" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {listStudyactivity} from '@/api/coursestudy/studyactivity'
	export default {
		options: {
			styleIsolation: 'shared' // 关闭样式隔离
		},
		data() {
			return {
				activeType: 0, // 默认选中全部
				activeStatus: 0, // 默认选中全部
				activityTypes: [{
						value: '',
						label: '全部'
					},
					{
						value: '0',
						label: '线上'
					},
					{
						value: '1',
						label: '线下'
					},
					{
						value: '2',
						label: '线上+线下'
					}
				],
				activityStatus: [{
						value: '',
						label: '全部'
					},
					{
						value: '0',
						label: '未开始'
					},
					{
						value: '1',
						label: '进行中'
					},
					{
						value: '2',
						label: '已结束'
					}
				],
				activities: []
			}
		},
		onLoad(){
			this.getActivityList()
		},
		computed: {
			filteredActivities() {
				return this.activities.filter(item => {
					const typeMatch = this.activeType === 0 || item.activityType === this.activityTypes[this.activeType].value;
					const statusMatch = this.activeStatus === 0 || item.status === this.activityStatus[this.activeStatus].value;
					return typeMatch && statusMatch;
				});
			}
		},
		methods: {
			async getActivityList() {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
			
				const res = await listStudyactivity(params)
				if (res.code === 200) {
					this.activities = res.rows.map(item => ({
						...item,
						coverImage: `http://localhost:8080${item.coverImage}`
					}))
				}
			},
			setActiveType(index) {
				this.activeType = index;
			},
			setActiveStatus(index) {
				this.activeStatus = index;
			},
			formatDateRange(start, end) {
				const startDate = new Date(start);
				const endDate = new Date(end);

				if (start === end) {
					return `${startDate.getMonth()+1}月${startDate.getDate()}日`;
				} else {
					return `${startDate.getMonth()+1}月${startDate.getDate()}日-${endDate.getMonth()+1}月${endDate.getDate()}日`;
				}
			},
			getActivityTypeLabel(type) {
				const types = {
					'0': '线上',
					'1': '线下',
					'2': '线上+线下'
				};
				return types[type] || '';
			},
			getActivityTypeTag(type) {
				const tags = {
					'0': 'primary',
					'1': 'success',
					'2': 'warning'
				};
				return tags[type] || 'default';
			},
			getActivityStatusLabel(status) {
				const statuses = {
					'0': '未开始',
					'1': '进行中',
					'2': '已结束'
				};
				return statuses[status] || '';
			},
			getActivityStatusTag(status) {
				const tags = {
					'0': 'info',
					'1': 'success',
					'2': 'error'
				};
				return tags[status] || 'default';
			},
			openDetail(activityId) {
				uni.navigateTo({
					url: `/pages/course/activityDetail?activityId=${activityId}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 15px;
		background-color: #f3f3f3;
		min-height: 100vh;
	}

	.filter-section {
		margin-bottom: 15px;

		.active {
			background-color: #409EFF !important;
			color: white !important;
		}
	}

	.activity-list {
		display: flex;
		flex-direction: column;
		gap: 35px;
	}

	.activity-card {
		background-color: #fff;
		border-radius: 50rpx;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		/* 添加淡入动画 */
		opacity: 0;
		animation: fadeIn 0.5s ease forwards;
	}

	/* 定义淡入动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 为每个项目设置不同的动画延迟 */
	.animated-item {
		&:nth-child(1) { animation-delay: 0.1s; }
		&:nth-child(2) { animation-delay: 0.2s; }
		&:nth-child(3) { animation-delay: 0.3s; }
		&:nth-child(4) { animation-delay: 0.4s; }
		&:nth-child(5) { animation-delay: 0.5s; }
	}

	.activity-info {
		padding: 12px;
	}

	.activity-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;

		.activity-title {
			font-size: 16px;
			font-weight: bold;
			color: #303133;
			flex: 1;
			margin-right: 8px;
		}
	}

	.activity-meta {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		font-size: 12px;
		color: #606266;

		.date,
		.location {
			margin-left: 4px;
		}
	}

	.creator-info {
		display: flex;
		align-items: center;
		margin-top: 8px;

		.creator-name {
			margin-left: 8px;
			font-size: 12px;
			color: #606266;
			flex: 1;
		}
	}
</style>